---
{
	"title": "Prettify",
	"language": "en",
	"category": "Plugins",
	"description": "Provides syntax highlighting of source code snippets in an HTML page using google-code-prettify.",
	"tag": "prettify",
	"parentdir": "prettify",
	"altLangPrefix": "prettify",
	"dateModified": "2014-02-19"
}
---

<p>Syntax highlighting of source code snippets in an html page using <a href="https://github.com/google/code-prettify" rel="external">google-code-prettify</a>.</p>

<section>
	<h2>How to use</h2>
	<ol>
		<li>Apply <code>class="wb-prettify"</code> to an element on the page to load the component (once per page).</li>
		<li>Apply <code>class="prettyprint"</code> to a <code>pre</code> or <code>code</code> element to apply syntax highlighting. Alternatively use <code>class="wb-prettify all-pre"</code> to apply syntax highlighting to all <code>pre</code> elements on the page.</li>
		<li>Apply <code>class="linenums"</code> to a <code>pre</code> or <code>code</code> element to add line numbers. Alternatively use <code>class="wb-prettify linenums"</code> to apply line numbers to all applicable <code>pre</code> elements on the page. Specify the starting number by adding <code>linenums:#</code> before <code>linenums</code>.</li>
		<li>Add extra language support by using <code>class="wb-prettify lang-*"</code> (e.g., <code>class="wb-prettify lang-css"</code>) and applying <code>class="lang-*"</code> to each applicable <code>pre</code> or <code>code</code> element. Supported formats are below:
			<ul>
				<li>lang-apollo</li>
				<li>lang-clj</li>
				<li>lang-css</li>
				<li>lang-dart</li>
				<li>lang-go</li>
				<li>lang-hs</li>
				<li>lang-lisp</li>
				<li>lang-lua</li>
				<li>lang-ml</li>
				<li>lang-n</li>
				<li>lang-proto</li>
				<li>lang-scala</li>
				<li>lang-sql</li>
				<li>lang-tex</li>
				<li>lang-vb</li>
				<li>lang-vhdl</li>
				<li>lang-wiki</li>
				<li>lang-xq</li>
				<li>lang-yaml</li>
			</ul>
		</li>
	</ol>
</section>

<section>
	<h2 id="examples" class="wb-prettify all-pre lang-css">Examples</h2>
	<section>
		<h3>HTML</h3>
		<pre><code>&lt;form action="#" method="post"&gt;
	&lt;div&gt;
		&lt;label for="data1"&gt;Form input default appearance:&lt;/label&gt;
		&lt;input name="data1" type="text" id="data1" /&gt;
	&lt;/div&gt;
	&lt;div&gt;
		&lt;label for="data2"&gt;Form text area default appearance:&lt;/label&gt;
		&lt;textarea name="data2" cols="15" rows="3" id="data2"&gt;&lt;/textarea&gt;
	&lt;/div&gt;
	&lt;div&gt;
		&lt;label for="data4"&gt;Form &lt;code&gt;select&lt;/code&gt; default appearance:&lt;/label&gt;
		&lt;select id="data4" name="data4"&gt;
			&lt;option value="Option 1"&gt;Option 1&lt;/option&gt;
			&lt;option value="Option 2"&gt;Option 2&lt;/option&gt;
			&lt;option value="Option 3"&gt;Option 3&lt;/option&gt;
			&lt;option value="Option 4"&gt;Option 4&lt;/option&gt;
		&lt;/select&gt;
	&lt;/div&gt;
	&lt;fieldset&gt;
		&lt;legend&gt;Form &lt;code&gt;legend&lt;/code&gt;, &lt;code&gt;fieldset&lt;/code&gt; and &lt;code&gt;checkbox&lt;/code&gt; default appearance&lt;/legend&gt;
		&lt;div&gt;
			&lt;input name="checkbox" type="checkbox" id="data5" value="checkbox" /&gt;&#160;&lt;label for="data5"&gt;Option 1&lt;/label&gt;&#160;&#160;
			&lt;input name="checkbox" type="checkbox" id="data6" value="checkbox" /&gt;&#160;&lt;label for="data6"&gt;Option 2&lt;/label&gt;&#160;&#160;
			&lt;input name="checkbox" type="checkbox" id="data7" value="checkbox" /&gt;&#160;&lt;label for="data7"&gt;Option 3&lt;/label&gt;&#160;&#160;
			&lt;input name="checkbox" type="checkbox" id="data8" value="checkbox" /&gt;&#160;&lt;label for="data8"&gt;Option 4&lt;/label&gt;
		&lt;/div&gt;
	&lt;/fieldset&gt;
	&lt;div&gt;
		&lt;input name="submit" type="submit" id="submit" value="Submit default appearance" /&gt;
		&lt;input name="reset" type="reset" id="reset" value="Reset default appearance" /&gt;
	&lt;/div&gt;
&lt;/form&gt;</code></pre>
	</section>
	<section>
		<h3>CSS (uses linenums)</h3>
		<pre class="prettyprint lang-css linenums"><code>#gcwu-date-mod dt,#gcwu-date-mod dd{
	float:left;
}

#gcwu-date-mod dd{
	margin:0 0 0 10px;
}

#gcwu-content h2,#gcwu-priorities h3{
	color:#333;
	font-weight:400;
}

#gcwu-content h2,#gcwu-priorities h3{
	border:none;
	margin-bottom:5px;
	font-size:1.6em;
}

div#gcwu-headlines ul li,div#gcwu-headlines ul{
	list-style:none !important;
	margin:0 !important;
	padding:0 !important;
}</code></pre>
	</section>
	<section>
		<h3>JavaScript (uses linenums:50 and linenums)</h3>
		<pre class="prettyprint linenums:50 linenums"><code>/**
 * Initialize the plugin. This only runs once on the DOM.
 * @function init
 */
init = function() {
	var cssClass, cssClasses, i, len, $pre,
		$elm = $( this ),
		modeJS = wb.getMode() + ".js",
		deps = [ "site!deps/prettify" + modeJS ],
		settings = $.extend( {}, defaults, $elm.data() );

	wb.remove( selector );

	// Check the element for `lang-*` syntax CSS classes
	cssClasses = typeof $elm[0].className === "string" ? $elm[0].className.split( " " ) : [];
	for ( i = 0, len = cssClasses.length; i &lt; len; i++ ) {
		cssClass = cssClasses[ i ];
		if ( cssClass.indexOf( "lang-" ) === 0 ) {
			deps.push( "site!deps/" + cssClass + modeJS );
		}
	}

	// CSS class overrides of settings
	settings.allpre = settings.allpre || $elm.hasClass( "all-pre" );
	settings.linenums = settings.linenums || $elm.hasClass( "linenums" );

	// Apply global settings
	if ( settings.allpre || settings.linenums ) {
		$pre = $( "pre" );
		if ( settings.allpre ) {
			$pre.addClass( "prettyprint" );
		}
		if ( settings.linenums ) {
			$pre.filter( ".prettyprint" ).addClass( "linenums" );
		}
	}

	// Load the required dependencies and prettify the code once finished
	Modernizr.load({
		load: deps,
		complete: function() {
			wb.doc.trigger( "prettyprint.wb-prettify" );
		}
	});
}</code></pre>
	</section>
	<section>
	<h3>Before and after comparison</h3>
	<div class="row">
	<div class="col-md-6">
	<h4>Before</h4>
	<pre><code>
	&lt;section id="wb-srch" class="<del>col-lg-8 text-right</del>"&gt;
		&lt;h2&gt;Search&lt;/h2&gt;
		&lt;form action="#" method="post" name="cse-search-box" role="search"<del> class="form-inline"</del>&gt;
			&lt;div class="form-group"&gt;
				&lt;label for="wb-srch-q" class="wb-inv"&gt;Search Canada.ca&lt;/label&gt;
				&lt;input id="wb-srch-q" list="wb-srch-q-ac" class="wb-srch-q form-control" name="q" type="search" value="" size="34" maxlength="170" placeholder="Search Canada.ca"&gt;
				&lt;datalist id="wb-srch-q-ac"&gt;&lt;/datalist&gt;
			&lt;/div&gt;
			&lt;div class="form-group submit"&gt;
				&lt;button type="submit" id="wb-srch-sub" class="btn btn-primary btn-small" name="wb-srch-sub"&gt;
					&lt;span class="glyphicon-search glyphicon"&gt;&lt;/span&gt;
					&lt;span class="wb-inv"&gt;Search&lt;/span&gt;
				&lt;/button&gt;
			&lt;/div&gt;
		&lt;/form&gt;
	&lt;/section&gt;
	</code></pre>
	</div>
	<div class="col-md-6">
	<h4>After</h4>
	<pre><code>
	&lt;section id="wb-srch" class="<ins>col-lg-offset-4 col-md-offset-4 col-sm-offset-2 col-xs-12 col-sm-5 col-md-4</ins>"&gt;
		&lt;h2&gt;Search&lt;/h2&gt;
		&lt;form action="#" method="post" name="cse-search-box" role="search"&gt;
			&lt;div class="form-group<ins> wb-srch-qry</ins>"&gt;
				&lt;label for="wb-srch-q" class="wb-inv"&gt;Search Canada.ca&lt;/label&gt;
				&lt;input id="wb-srch-q" list="wb-srch-q-ac" class="wb-srch-q form-control" name="q" type="search" value="" size="34" maxlength="170" placeholder="Search Canada.ca"&gt;
				&lt;datalist id="wb-srch-q-ac"&gt;&lt;/datalist&gt;
			&lt;/div&gt;
			&lt;div class="form-group submit"&gt;
				&lt;button type="submit" id="wb-srch-sub" class="btn btn-primary btn-small" name="wb-srch-sub"&gt;
					&lt;span class="glyphicon-search glyphicon"&gt;&lt;/span&gt;
					&lt;span class="wb-inv"&gt;Search&lt;/span&gt;&lt;/button&gt;
			&lt;/div&gt;
		&lt;/form&gt;
	&lt;/section&gt;
	</code></pre>
	</div>
	</div>
	</section>
</section>
